<template>
  <div style="">
    <topSearch @on-toggle-search="toggleSearchBox"></topSearch>

    <group v-show="showSearchBox">
      <popup-picker title="地区" :data="areaList" :columns="3" v-model="area" ref="picker3" placeholder="请选择地区" show-name
                    @on-change="onChange"></popup-picker>
      <popup-picker title="站点" :data="stationList" v-model="station" show-name placeholder="请选择站点"></popup-picker>

      <multiple-choice :showPopup="showPopup" v-model="years" placeholder="请选择年份"></multiple-choice>

    </group>

    <div class="picker-buttons" v-show="showSearchBox">
      <x-button type="primary" @click.native="search()"><i class="icon icon-search"></i> 查询</x-button>
    </div>

    <group title="消耗量统计">
      <div id="chart"></div>
    </group>

  </div>
</template>
<script>
  import {PopupPicker, Popup, Group, Cell, Picker, XButton, Divider, ChinaAddressData, TransferDom} from 'vux'
  import topSearch from '@/components/statistics/public/top-search'
  import multipleChoice from '@/components/statistics/public/multiple-choice'

  import * as echarts from 'echarts';
  import 'echarts/chart/line';
  import 'echarts/component/toolbox';
  import 'echarts/component/tooltip';
  import 'echarts/component/legend';
  import 'echarts/component/title';

  export default {
    directives: {
      TransferDom
    },
    components: {
      multipleChoice,
      topSearch,

      Popup,
      PopupPicker,
      Group,
      Picker,
      XButton,
      Divider,
      Cell
    },
    mounted() {
      //this.getList();
      this.initChart();
    },
    data () {
      return {
        showSearchBox: true,
        area: [],
        station: [],
        stationList: [[
          {
            name: '嘉通站',
            value: 'jiatong',
          },
          {
            name: '嘉站',
            value: 'jiadtong',
          },
        ]],
        areaList: ChinaAddressData,
        showPopup: false,
        years: []
      }
    },
    watch: {
      years(val){
        console.log(val)
      }
    },
    methods: {
      toggleSearchBox(){
        this.showSearchBox = !this.showSearchBox;
      },
      initChart(){
        let $this = this;
        $this.option = {
          tooltip: {
            trigger: 'axis'
          },
          legend: {
            data: ['2015年', '2016年', '2017年']
          },

          calculable: true,
          xAxis: [
            {
              type: 'category',
              boundaryGap: false,
              data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"]
            }
          ],
          yAxis: [
            {
              type: 'value'
            }
          ],
          series: [
            {
              name: '2015年',
              type: 'line',
              smooth: true,
              //itemStyle: {normal: {areaStyle: {type: 'default'}}},
              data: [12.6, 35.9, 19.0, 26.4, 28.7, 49.7, 57.6, 72.2, 48.7, 28.8, 36.0, 32.3]
            },
            {
              name: '2016年',
              type: 'line',
              smooth: true,
              // itemStyle: {normal: {areaStyle: {type: 'default'}}},
              data: [23.9, 15.9, 21.1, 18.7, 43.3, 56.2, 61.6, 46.6, 55.4, 18.4, 20.3, 20.7]
            },
            {
              name: '2017年',
              type: 'line',
              smooth: true,
              //itemStyle: {normal: {areaStyle: {type: 'default'}}},
              data: [15.9, 21.1, 18.7, 18.7, 43.3, 56.2, 61.6, 50.6, 55.4, 174, 20.3, 20.7]
            }
          ]
        };
        var echartsOne = document.getElementById('chart');
        var myChart = echarts.init(echartsOne);

        myChart.setOption($this.option);
      },
      search(){
        this.showSearchBox = false;
      },
      goPath(name){
        this.$router.push({
          name: name
        });
      },
      onChange (val) {
        console.log('val change', val)
      },
      onShow () {
        console.log('on show')
      },
      onHide (type) {
        console.log('on hide', type)
      }
    }
  }
</script>

<style scoped>
  .picker-buttons {
    margin: 10px 15px;
  }

  .picker-buttons .icon {
    font-size: 20px;
  }

  #chart {
    width: 100%;
    height: 500px;
    margin: 10px auto;
  }
</style>
